File System Access এবং Data Management

File System Access এবং Data Management অ্যাপ্লিকেশনের মধ্যে ডেটার সংগঠন এবং পরিচালনা একটি গুরুত্বপূর্ণ অংশ। যখন আপনার অ্যাপ্লিকেশন ফাইলের মাধ্যমে ডেটা পরিচালনা করতে চায়, তখন এটি File System Access API এর মাধ্যমে কাজ করে। Angular এর মাধ্যমে ফাইল সিস্টেম অ্যাক্সেস এবং ডেটা ম্যানেজমেন্ট করার জন্য কিছু সাধারণ পদ্ধতি রয়েছে। এই লেখায় আমরা File System Access API, Local Storage, IndexedDB, এবং Backend APIs সহ অন্যান্য ডেটা ম্যানেজমেন্ট কৌশলগুলো আলোচনা করবো।

১. File System Access API

File System Access API আপনাকে ব্রাউজারের মাধ্যমে ডিরেক্টরি এবং ফাইলের সাথে ইন্টারঅ্যাক্ট করার অনুমতি দেয়। এটি ফাইল সিস্টেমে ফাইল পড়া, লেখা এবং পরিবর্তন করার সুযোগ দেয়। যদিও এটি শুধুমাত্র সমর্থিত ব্রাউজারে কাজ করে, তবে এটি একটি শক্তিশালী API যা ক্লায়েন্ট-সাইড ফাইল হ্যান্ডলিং সহজ করে।

১.১ File System Access API এর সাথে কাজ করা

প্রথমে, আপনার অ্যাপ্লিকেশনে ফাইল সিস্টেম অ্যাক্সেস করার জন্য requestFileSystem() বা showOpenFilePicker() ফাংশন ব্যবহার করা হয়।

১.২ ফাইল ওপেন করার উদাহরণ

async openFile() {
  try {
    const fileHandle = await window.showOpenFilePicker();
    const file = await fileHandle[0].getFile();
    const fileContent = await file.text();
    console.log(fileContent);
  } catch (error) {
    console.error('File opening failed:', error);
  }
}

এখানে showOpenFilePicker() ব্যবহার করা হয়েছে যা ইউজারের ফাইল সিলেক্ট করার জন্য ডায়ালগ খুলবে এবং নির্বাচিত ফাইলের কন্টেন্ট রিড করবে।

১.৩ ফাইল সেভ করা উদাহরণ

async saveFile(content: string) {
  try {
    const handle = await window.showSaveFilePicker();
    const writableStream = await handle.createWritable();
    await writableStream.write(content);
    await writableStream.close();
  } catch (error) {
    console.error('File saving failed:', error);
  }
}

এটি ইউজারের কাছে ফাইল সেভ করার জন্য পিকারের মাধ্যমে সেভ করতে সহায়তা করে।

২. Local Storage

Local Storage হলো ওয়েব স্টোরেজের একটি বিশেষ ধরনের স্টোরেজ যা ব্রাউজারের মধ্যে ডেটা সংরক্ষণ করে। এটি ক্লায়েন্ট-সাইড ডেটার জন্য কার্যকরী, তবে এটি একেবারে ছোট পরিমাণ ডেটা সংরক্ষণের জন্য উপযুক্ত।

২.১ Local Storage এ ডেটা সংরক্ষণ

localStorage.setItem('userName', 'John Doe');

২.২ Local Storage থেকে ডেটা রিড করা

const userName = localStorage.getItem('userName');
console.log(userName); // Output: John Doe

২.৩ Local Storage থেকে ডেটা মুছে ফেলা

localStorage.removeItem('userName');

২.৪ Local Storage পরিষ্কার করা

localStorage.clear();

৩. IndexedDB

IndexedDB একটি ব্রাউজার ভিত্তিক ডেটাবেজ, যা স্ট্রাকচারড ডেটা সংরক্ষণের জন্য ব্যবহৃত হয়। এটি বড় পরিমাণ ডেটা সঞ্চয়ের জন্য উপযুক্ত এবং অ্যাসিনক্রোনাস অপারেশন সমর্থন করে।

৩.১ IndexedDB এ ডেটা সংরক্ষণ

let request = indexedDB.open("myDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["users"], "readwrite");
  let store = transaction.objectStore("users");
  store.add({ id: 1, name: "John Doe" });
};

request.onerror = function(event) {
  console.log("Database error: " + event.target.errorCode);
};

৩.২ IndexedDB থেকে ডেটা রিড করা

let request = indexedDB.open("myDatabase", 1);
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["users"], "readonly");
  let store = transaction.objectStore("users");
  let getRequest = store.get(1); // Get data by ID

  getRequest.onsuccess = function(event) {
    console.log(getRequest.result); // { id: 1, name: "John Doe" }
  };
};

৪. Backend APIs (Server-side data management)

আপনার অ্যাপ্লিকেশন যদি বড় আকারের ডেটা পরিচালনা করতে চায় বা একাধিক ইউজারের সাথে কাজ করে, তবে আপনি Backend APIs এর মাধ্যমে ডেটা ম্যানেজ করতে পারবেন। সাধারণত, RESTful API অথবা GraphQL API ব্যবহৃত হয় সার্ভার থেকে ডেটা ফেচ বা আপডেট করার জন্য।

৪.১ HttpClient ব্যবহার করে Backend API থেকে ডেটা ফেচ করা

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss'],
})
export class DataComponent {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      console.log(response);
    });
  }
}

এটি একটি সিম্পল API কল করে সার্ভার থেকে ডেটা ফেচ করার উদাহরণ।

৪.২ POST ডেটা পাঠানো

const userData = { name: 'John Doe', email: 'john@example.com' };
this.http.post('https://api.example.com/users', userData).subscribe(response => {
  console.log(response);
});

৫. File Handling in Ionic

Ionic এ ফাইল হ্যান্ডলিংয়ের জন্য Cordova File Plugin বা Capacitor Filesystem Plugin ব্যবহার করা হয়, যা নেটিভ মোবাইল ডিভাইসের ফাইল সিস্টেমে ডেটা সংরক্ষণ এবং পড়ার সুবিধা দেয়।

৫.১ Capacitor Filesystem Example

npm install @capacitor/filesystem
npx cap sync

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';

async saveData() {
  await Filesystem.writeFile({
    path: 'myData.txt',
    data: 'Hello, Ionic!',
    directory: Directory.Documents,
    encoding: Encoding.UTF8
  });
}

async readData() {
  const result = await Filesystem.readFile({
    path: 'myData.txt',
    directory: Directory.Documents,
    encoding: Encoding.UTF8
  });
  console.log(result.data); // Output: Hello, Ionic!
}

উপসংহার

• File System Access API: ব্রাউজারের ফাইল সিস্টেমের সাথে সরাসরি যোগাযোগ করতে ব্যবহার করা হয়, তবে এটি শুধুমাত্র কিছু ব্রাউজারে সমর্থিত।
• Local Storage: ছোট পরিমাণ ডেটা সংরক্ষণ করতে উপযুক্ত, তবে এটি খুব সীমিত এবং স্কেলেবল নয়।
• IndexedDB: বড় পরিমাণ ডেটা এবং স্ট্রাকচারড ডেটার জন্য আদর্শ।
• Backend APIs: ডেটাবেস এবং সার্ভার সাইড ডেটা ম্যানেজমেন্টের জন্য ব্যবহৃত হয়।
• Capacitor Filesystem: মোবাইল অ্যাপ্লিকেশনে ফাইল পরিচালনা এবং ডেটা সংরক্ষণের জন্য ব্যবহৃত হয়।

এই প্রযুক্তি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডেটা ম্যানেজমেন্ট এবং ফাইল হ্যান্ডলিং আরও কার্যকরী ও সুরক্ষিতভাবে পরিচালনা করতে পারবেন।